<template>
  <div class="app-container">
    <el-row>
      <el-form ref="form" :model="form" :inline="true" label-width="80px">
        <!-- <el-form-item label="统计年份">
          <el-date-picker v-model="form.year" type="year" clearable value-format="yyyy"
            placeholder="选择日期"></el-date-picker>
        </el-form-item> -->
        <el-form-item label="宿舍分类：" v-if="form.type == 1 && data.includes('宿舍分类')">
          <el-select v-model="form.feeTypeQuery" clearable filterable placeholder="请选择宿舍分类" style="width: 100%">
            <el-option v-for="dict in dict.type.sys_charging_standards" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公寓名称：" v-if="form.type == 1 && data.includes('宿舍楼')">
          <el-select v-model="form.houseId" placeholder="请选择公寓楼名称" style="width: 100%">
            <el-option v-for="dict in houseList" :key="dict.houseId" :label="dict.houseName"
              :value="dict.houseId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生性别：" v-if="form.type == 1 && data.includes('性别')">
          <el-select v-model="form.sexQuery" placeholder="请选择学生性别" style="width: 200px">
            <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="筛选：">
          <el-radio v-model="form.type" label="1" @change="radioChange">
            <span>
              <el-checkbox-group v-model="data" @change="checkox">
                <el-checkbox label="性别" name="sex"></el-checkbox>
                <el-checkbox label="宿舍分类" name="feeType"></el-checkbox>
                <el-checkbox label="宿舍楼" name="houseName"></el-checkbox>
              </el-checkbox-group>
            </span>
          </el-radio>
<!--          <el-radio v-model="form.type" label="2" @change="radioChange">宿舍明细</el-radio>-->
        </el-form-item>



        <br />

        <!-- <el-form-item label="宿舍明细：">

          <el-switch v-model="form.type" active-color="#13ce66" inactive-color="#ff4949" active-value="2"
            inactive-value="1">
          </el-switch>
        </el-form-item> -->

        <el-form-item>
          <div style="float:right;">
            <el-button type="primary" size="mini" @click="seaech">统计</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-row>

    <el-table :data="tableData" style="width: 100%" key="usernames">
      <el-table-column label="宿舍" align="center" v-if="this.form.type == '1' && column" key="hoom">
        <el-table-column prop="feeType" label="分类名称" v-if="this.data.includes('宿舍分类') && this.form.type == '1'"
          align="center" :filters="filData" :filter-method="filterHandler">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_charging_standards" :value="scope.row.feeType"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" v-if="this.data.includes('性别') && this.form.type == '1'" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column prop="houseName" label="楼名称" v-if="this.data.includes('宿舍楼') && this.form.type == '1'"
          align="center"></el-table-column>
        <!-- <el-table-column prop="roomNo" label="宿舍名称" align="center"></el-table-column> -->
      </el-table-column>
      <el-table-column label="宿舍" align="center" v-if="this.form.type == '2'" key="rooms">
        <el-table-column prop="feeType" label="分类名称" align="center" v-if="this.form.type == '2'" :filters="filData"
          :filter-method="filterHandler">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_charging_standards" :value="scope.row.feeType"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column prop="houseName" label="楼名称" align="center" v-if="this.form.type == '2'"></el-table-column>
        <el-table-column prop="roomNo" label="宿舍名称" align="center" v-if="this.form.type == '2'"></el-table-column>
      </el-table-column>

      <el-table-column label="总床位" align="center">
        <el-table-column prop="totalBed" label="总床位" align="center"></el-table-column>
        <el-table-column prop="useBed" label="已用床位" align="center"></el-table-column>
        <el-table-column prop="surplusBed" label="剩余床位" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="spareBed(scope.row, 1)">{{ scope.row.surplusBed }}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="新生占用部分" align="center">
        <el-table-column prop="newTotalBed" label="总床位" align="center"></el-table-column>
        <el-table-column prop="newUseBed" label="已用床位" align="center"></el-table-column>
        <el-table-column prop="newSurplusBed" label="剩余床位" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="spareBed(scope.row, 2)">{{ scope.row.newSurplusBed }}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="其余部分" align="center">
        <el-table-column prop="otherTotalBed" label="总床位" align="center"></el-table-column>
        <el-table-column prop="otherUseBed" label="已用床位" align="center"></el-table-column>
        <el-table-column prop="otherSurplusBed" label="剩余床位" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="spareBed(scope.row, 3)">{{ scope.row.otherSurplusBed }}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
      @pagination="seaech" />
    <!-- 查看辅导员分配班级 -->
    <el-dialog :title="title" :visible.sync="bebWindow" width="70%" append-to-body>
      <el-table
        :data="spareBedList.slice((spareForm.pageNumber - 1) * spareForm.pageSize, spareForm.pageNumber * spareForm.pageSize)">
        <!-- <el-table-column label="分类名称" prop="gradeName" align="center"/> -->
        <el-table-column label="楼名称" prop="houseName" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="宿舍号" prop="roomNo" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="宿舍楼层" prop="floorNo" align="center" />
        <el-table-column label="剩余床位号" prop="bedNo" align="center" />

      </el-table>
      <el-pagination style="text-align: right;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="spareForm.pageNumber" :page-sizes="[10, 20, 30, 50]" :page-size="10" background
        layout="total, sizes, prev, pager, next, jumper" :total="spareBedList.length">
      </el-pagination>
    </el-dialog>
  </div>

</template>

<script>
import { getRoomResourcesStatistics, getSurplusBed } from "@/api/apartment/statistics";
import searchForm from "@/components/Search/searchForm.vue";
import { getDicts } from "@/api/system/dict/type";
import { mapActions, mapState } from "vuex";
export default {
  components: {
    searchForm,

  },
  dicts: ["sys_charging_standards", "sys_user_sex"],
  data() {
    return {
      queryParams: {},
      form: {
        type: "1",
        sex: false,
        houseName: false,
        feeType: false,
        sexQuery: null,
        feeTypeQuery: null,
        houseId: null,
        pageNum: 1,
        pageSize: 10
      },
      spareForm: {
        pageNumber: 1,
        pageSize: 10
      },
      title: '',
      bebWindow: false,
      column: true,
      total: 0,
      spareTotal: 0,
      data: ["宿舍分类"],
      tableData: [],
      filData: [],
      spareBedList: [],
    };
  },
  async created() {
    await this.getHouseList()
    getDicts("sys_charging_standards").then(res => {
      this.filData = res.data.map(item => {
        return {
          value: item["dictValue"],
          text: item["dictLabel"]
        };
      });
    });
  },
  computed: {
    ...mapState({
      houseList: state => state.apartmentBuilding.list,
    })
  },
  methods: {
    ...mapActions({
      getHouseList: 'apartmentBuilding/getTable',

    }),
    seaech() {
      this.tableData = [];
      this.radioChange()
      console.log(this.form);
      getRoomResourcesStatistics(this.form).then(res => {
        console.log(res, "search");
        this.tableData = [...res.rows];
        this.total = res.total;
      });
    },
    //pageSize改变时触发的事件
    handleSizeChange(val) {
      this.spareForm.pageNumber = 1;
      this.spareForm.pageSize = val;
    },
    //当前页码发生改变时触发的事件
    handleCurrentChange(val) {
      this.spareForm.pageNumber = val;
    },
    // 重置
    reset() {
      this.form.type = "1";
      this.form.year = "";
      Object.assign(this.form, this.$options.data().form);

      this.seaech();
    },
    checkox(v) {
      // console.log(this.data,'data');
      if (this.data.length < 1) {
        this.column = false;
      } else {
        this.column = true;
      }
      if (this.data.includes("性别")) {
        this.form.sex = true;
      } else {
        this.form.sex = false;
      }
      if (this.data.includes("宿舍分类")) {
        this.form.feeType = true;
      } else {
        this.form.feeType = false;
      }
      if (this.data.includes("宿舍楼")) {
        this.form.houseName = true;
      } else {
        this.form.houseName = false;
      }
      if (this.form.type == 1) {
        this.seaech();
      }
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    // 总床位数剩余床位数
    async spareBed(row, type) {
      switch (type) {
        case 1:
          this.title = '总床位剩余床位数'
          break;
        case 2:
          this.title = '新生剩余床位数'
          break;
        default:
          this.title = '其余剩余床位数'
      }
      this.spareBedList = []
      if (row.surplusBed > 0 || row.newSurplusBed > 0 || row.otherSurplusBed > 0) {
        this.bebWindow = true
        let res = await getSurplusBed({ feeType: row.feeType, type: type, sex: row.sex, houseId: row.houseId });
        debugger
        if (res.code == 200) {
          this.spareBedList = res.rows
          this.spareTotal = res.total;
        }
      }
    },
    radioChange() {
      this.tableData = [];
      if (this.form.type == 2) {
        (this.form.sex = false),
          (this.form.houseName = false),
          (this.form.feeType = false);
      } else {
        if (this.data.includes("性别")) {
          this.form.sex = true;
        } else {
          this.form.sex = false;
        }
        if (this.data.includes("宿舍分类")) {
          this.form.feeType = true;
        } else {
          this.form.feeType = false;
        }
        if (this.data.includes("宿舍楼")) {
          this.form.houseName = true;
        } else {
          this.form.houseName = false;
        }

        // if (this.form.feeTypeQuery) {
        //   this.form.feeType = true;
        // } else {
        //   this.form.feeType = false;
        // }
        // if (this.form.sexQuery) {
        //   this.form.sex = true;
        // } else {
        //   this.form.sex = false;
        // }
        // if (this.form.houseId) {
        //   this.form.houseName = true;
        // } else {
        //   this.form.houseName = false;
        // }
      }
    }
  }
};
</script>
